<template>
  <div class="meterage-manage">
    <div class="model-title-css">
      <div class="title">定价材料管理</div>
    </div>
    <div class="background_wrap">
      <div class="operate_wrap flex">
        <div class="flex-center">
          <el-button v-permission='permission.add' type="primary" size="small" class="add buildButtonStyle" @click="showDialog('build','定价材料新增')" style="width: 88px"><i class="iconfont icon-icon_add"></i> 新增
          </el-button>

          <!-- 导入-->
          <el-upload class="daochu buildButtonStyle bidTable-import-button" style="display: none;" action="" :before-upload="submitImportExcel">
            <el-button slot="trigger" id="excel-import-button" class="delete" size="small" style="width: 0px;opacity:0;margin-left: -100px;"><i class="iconfont icon-icon_zp"></i>&nbsp; 导入excel
            </el-button>
          </el-upload>

          <el-button class="delete" size="small" style="width: 110px;" @click="templateDownload" v-permission="permission.add">
            <i class="iconfont icon-daochu"></i> 模板下载
          </el-button>

          <el-button type="primary" class="delete" size="small" @click="importExcel" style="width: 88px;" v-permission="permission.add"><i class="iconfont icon-icon_zp"></i>&nbsp; 导入</el-button>

          <el-button type="primary" size="small" class="daochu" style="width: 88px" @click="exportExcel" v-permission="permission.show"><i class="iconfont icon-daochu"></i>导出</el-button>

        </div>
        <div class="g-flex flex-right">
          <el-input class="input" size="small" style="width: 160px" v-model="search.materialName" placeholder="请输入材料名称" clearable @change="getList(true)"></el-input>

          <el-input class="input" size="small" style="width: 160px" v-model="search.projectName" placeholder="请输入项目名称" clearable @change="getList(true)"></el-input>

          <el-button class="search" size="small" @click="getList(true)"><i class="iconfont icon-sousuo"></i>&nbsp;搜索
          </el-button>
        </div>
      </div>
      <!--·列表-->
      <!--======================================================================================================-->
      <div class="list_wrap">
        <el-table class="table-two-blue" :border="true" :row-class-name="tableRowStyleName" :cell-class-name="tableCellStyleName" :header-cell-class-name="tableHeaderCellStyleName" :stripe="true" ref="multipleTable" :data="list" tooltip-effect="dark" @cell-click="cellClick" style="width: 100%; font-family: PingFangSC-Regular; font-size: 14px;">
          <el-table-column show-overflow-tooltip label="序号" width="60" fixed align="center">
            <template slot-scope="scope">
              <span>{{scope.$index + search.pageNo * search.pageSize + 1 }}</span>
            </template>
          </el-table-column>

          <el-table-column show-overflow-tooltip prop="projectName" label="项目名称" width="400" fixed></el-table-column>

          <el-table-column show-overflow-tooltip prop="materialName" label="材料名称" width="200">
          </el-table-column>

          <el-table-column show-overflow-tooltip prop="model" label="规格/型号" width="300">
          </el-table-column>

          <el-table-column show-overflow-tooltip prop="unit" label="单位" width="80">
          </el-table-column>

          <el-table-column show-overflow-tooltip prop="number" label="数量" width="120">
            <template slot-scope="scope">
              <div style="text-align: right;">{{ scope.row.number }}</div>
            </template>
          </el-table-column>

          <el-table-column show-overflow-tooltip prop="price" label="单价" width="150">
            <template slot-scope="scope">
              <div style="text-align: right;">{{ scope.row.price }}</div>
            </template>
          </el-table-column>

          <el-table-column show-overflow-tooltip prop="totalPrice" label="合价" width="150">
            <template slot-scope="scope">
              <div style="text-align: right;">{{ scope.row.totalPrice }}</div>
            </template>
          </el-table-column>

          <el-table-column show-overflow-tooltip prop="remark" label="备注" style="text-align: center" width="180">
          </el-table-column>

          <el-table-column show-overflow-tooltip prop="createTime" label="创建日期" width="170">
          </el-table-column>

          <el-table-column show-overflow-tooltip prop="createrName" label="操作人" width="150">
          </el-table-column>

          <el-table-column show-overflow-tooltip width="250" label="操作" fixed="right">
            <template slot-scope="scope">
              <el-button size="mini" class="menu_icon iconfont icon-icon_look action_color1" v-permission="permission.show" @click="showDialog('check','定价材料查看',scope.row.id)">&nbsp;查看</el-button>
              <el-button size="mini" class="menu_icon iconfont icon-xiugai-copy action_color1" v-permission="permission.edit" @click="showDialog('edit','定价材料编辑',scope.row.id)">&nbsp;修改</el-button>
              <el-button size="mini" class="menu_icon iconfont icon-shanchu action_color2" v-permission="permission.del" @click="showDialog('delete','删除',scope.row.id)">&nbsp;删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="foot">
          <div>共计{{ search.total }}条</div>

          <el-pagination layout="prev, pager, next" :total="search.total" :page-size="search.pageSize" :current-page="search.pageNo + 1" :prev-text="tablePaginationPrev" :next-text="tablePaginationNext" @current-change="paginationChange">
          </el-pagination>
        </div>
      </div>

      <Detail :postDetail="postDetailData" @reloadList="getList(true)"></Detail>
    </div>
  </div>
</template>

<script>
import priceManage from '@/api/buss/priceManage';
import { tableRowStyleGol, tableCellStyleGol, doCreateObject, tableHeaderCellStyleGol } from '@/utils/publicFun';
import msgUtil from '@/utils/msgUtil'
export default {
  name: `price-manage`,
  components: {
    Detail: require(`./price-manage-detail`).default,
  },
  data() {
    return {
      permission: {
        add: ['100', '1009156:add'],
        show: ['100', '1009156:show'],
        edit: ['100', '1009156:edit'],
        del: ['100', '1009156:del'],
      },
      tableRowStyleName: tableRowStyleGol,
      tableCellStyleName: tableCellStyleGol,
      tableHeaderCellStyleName: tableHeaderCellStyleGol,
      tablePaginationPrev: '上一页',
      tablePaginationNext: '下一页',
      // 搜索参数
      search: {
        pageSize: 10,
        pageNo: 0,
        pageSum: 0,
        total: 0,
        materialName: '',//材料名称
        projectName: ''
      },
      // 列类型表
      list: [

      ],
      total: 0,
      // 向详情子组件的传值
      postDetailData: {
        show: false,
        type: 'build',
        typeNmae: '新增'
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 获取列表 api
    getList(reload) {
      if (reload) {
        this.search.pageNo = 0
        this.search.total = 0
      }
      this.list = []
      priceManage.listPage(this.search).then(res => {
        if (res.code === 200) {
          if (res.data.content.length > 0) {
            this.list = res.data.content
          }
          this.search.total = res.data.totalElements
        } else {
          this.$messageError(res.data.msg)
        }
      }).catch(res => {
        console.log('请求出现错误', res);
        this.$messageError(this.$route.name + '请求失败')
      })
    },
    //切换分页器
    paginationChange(index) {
      this.search.pageNo = index - 1
      this.getList()
    },
    /*  操作 */
    showDialog(type, typeName, detailId) {
      switch (type) {
        case 'build':
          this.postDetailData = {
            show: true,
            type: type,
            typeName: typeName,
            detailId: '',
          }
          break
        case 'edit':
          this.postDetailData = {
            show: true,
            type: type,
            typeName: typeName,
            detailId: detailId,
          }
          break
        case 'check':
          this.postDetailData = {
            show: true,
            type: type,
            typeName: typeName,
            detailId: detailId,
          }
          break
        case 'delete':
          if (detailId === '') {
            msgUtil.error2('请先选择要删除的记录！')
            return
          }
          msgUtil.confirm('确认删除该条数据？').then(res => {
            let idlist = []
            idlist.push(detailId)
            let param = {
              ids: idlist
            }
            priceManage.del(param).then(res => {
              if (res.code === 200) {
                msgUtil.success2('删除成功!')
                this.getList()
              } else {
                msgUtil.error2(res.data.message)
              }
            })
          })
          break
      }
    },
    importExcel() {
      $("#excel-import-button").trigger("click");
    },


    //模板下载
    templateDownload() {
      this.$httpPost(`/buss/pricingMaterial/downfile`,
        this.search, { responseType: 'blob' }).then(res => {
          doCreateObject(res, '定价材料模版.xlsx');
        }).catch(e => {
          console.log(e);
          this.$messageError("请求excel模板失败")
        })
    },
    //  提交excel导入文件选择
    submitImportExcel(file) {
      let fd = new FormData()
      fd.append('file', file)
      // fd.append('enginType', this.search.enginType)
      // fd.append('projectStage', this.search.projectStage)
      fd.append('Content-Type', 'multipart/form-data; boundary=----WebKitFormBoundaryIOi8qEBAFV1KN25n')
      priceManage.importExcel(fd).then(res => {
        if (res.code == 200) {
          this.getList(true)
        } else {
          console.log("请求导入excel失败:" + res.data.message)
        }
      }).catch(e => {
        console.log(e);
      })
    },
    exportExcel() {
      priceManage.exportExcel(this.search).then(res => {
        doCreateObject(res, '定价材料表.xls')
      })
    },
    // 点击单元格
    cellClick(row, column, cell, event) {
      console.log(column)
    },
  }
  ,
}
</script>

<style scoped lang="scss">
.operate_wrap {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 40px;
  width: 100%;
  box-sizing: border-box;
  // .el-button,
  // .el-select {
  //   border-radius: 4px;
  //   font-family: PingFangSC-Medium;
  //   font-size: 14px;
  //   display: inline-block;
  // }
  .el-date-editor--daterange {
    width: 300px;
  }
  .add {
    width: 88px;
  }
  .push {
    background-color: rgb(277, 124, 42);
    border: none;
  }
  .delete {
    margin: 0 10px;
  }
  .el-select {
    width: 140px;
    margin-left: 10px;
  }
  .input {
    width: 150px;
    margin-right: 15px;
  }
  .search {
    width: 88px;
    color: #fff;
    margin-left: 0 !important;
  }
}

.list_wrap {
  margin-top: 20px;
}
.hv-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
  font-size: 16px;
  color: #909399;
}
</style>
